<script setup lang="ts">
import {onMounted, ref, watch} from 'vue';
import {ElMessage} from 'element-plus'; // 引入消息提示
import {allUserData} from "../../api/user/user.ts";
import {allClassData, updateClass} from "../../api/class/class.ts";

// --- 类型定义 ---
interface SelectOption {
  value: number;
  label: string;
}

// --- 状态管理 ---
const dialogVisible = ref(false); // 控制弹窗显示/隐藏，命名更清晰
const isClassSelectDisabled = ref(true); // 控制班级选择框是否禁用

// 选择框数据源
const optionsUser = ref<SelectOption[]>([]);
const optionsClass = ref<SelectOption[]>([]);

// 表单选中的值 (使用 number 类型，因为 option 的 value 是 number)
const selectedUserId = ref<number | null>(null);
const selectedClassId = ref<number | null>(null);

// --- API 调用 ---
// 获取所有学生数据
const fetchUserData = async () => {
  try {
    const SysUser = {
      id: null,
      router: "student",
      token: null,
      username: null,
      password: null,
      name: null,
      age: null,
      gender: null,
      createTime: null,
      updateTime: null,
      imgUrl: null,
      studengOrteacherId: null
    }
    const res = await allUserData(SysUser);
    optionsUser.value = res.data.map(item => ({
      value: item.id ?? 0,
      label: item.name ?? '未知用户'
    }));
  } catch (err) {
    console.error("获取用户数据失败:", err);
    ElMessage.error('获取用户数据失败');
  }
};

// 获取所有班级数据
const fetchClassData = async () => {
  try {
    const res = await allClassData();
    optionsClass.value = res.data.map(item => ({
      value: item.id,
      label: item.name
    }));
  } catch (err) {
    console.error("获取班级数据失败:", err);
    ElMessage.error('获取班级数据失败');
  }
};

// --- 事件处理 ---
// 提交表单
const handleAddClass = async () => {
  // 1. 前端校验
  if (!selectedUserId.value || !selectedClassId.value) {
    ElMessage.warning('请选择学生和班级');
    return;
  }

  // 2. 构建提交数据
  // 直接使用选中的 ID，无需遍历查找
  const payload = {
    id: selectedClassId.value, // 班级 ID
    studentId: [selectedUserId.value], // 学生 ID 数组
    // studentName 通常不需要前端提交，后端可以根据 studentId 查询
    // 如果确实需要，可以再从 optionsUser 中查找
    studentName: [optionsUser.value.find(u => u.value === selectedUserId.value)?.label].filter(Boolean)
  };

  console.log("准备提交的数据:", payload);

  try {
    // 3. 调用 API
    const res = await updateClass(payload);
    console.log(res);
    ElMessage.success('加入班级成功！');
    dialogVisible.value = false; // 关闭弹窗
  } catch (err) {
    console.error("提交失败:", err);
    ElMessage.error('加入班级失败，请重试');
  }
};

// --- 监听器 ---
// 监听学生选择，一旦有值，就启用并加载班级列表
watch(selectedUserId, (newValue) => {
  if (newValue) {
    isClassSelectDisabled.value = false;
    fetchClassData();
  } else {
    // 如果取消选择，则重置班级选择
    isClassSelectDisabled.value = true;
    selectedClassId.value = null;
    optionsClass.value = [];
  }
});

// --- 生命周期 ---
onMounted(() => {
  fetchUserData();
});
</script>

<template>
  <h2>加入班级</h2>
  <el-divider/>
  <el-button plain type="primary" @click="dialogVisible = true">加入班级</el-button>
  <el-divider/>
  <el-text>说明：请选择学生和班级，然后点击“加入班级”按钮</el-text>

  <el-dialog
      v-model="dialogVisible"
      title="加入班级"
      width="350"
      @close="selectedUserId = null; selectedClassId = null"
  >
  <el-form label-width="100px">
    <el-form-item label="选择学生">
      <el-select
          v-model="selectedUserId"
          placeholder="请选择学生"
          style="width: 100%"
          clearable
      >
        <el-option
            v-for="item in optionsUser"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="选择班级">
      <el-select
          v-model="selectedClassId"
          :disabled="isClassSelectDisabled"
          :placeholder="isClassSelectDisabled ? '请先选择学生' : '请选择班级'"
          style="width: 100%"
          clearable
      >
        <el-option
            v-for="item in optionsClass"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>

  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleAddClass">
        确认加入
      </el-button>
    </div>
  </template>
  </el-dialog>
</template>

<style scoped>

</style>